<template>
  <el-container style="height: 850px">
    <el-header style="height: 10%;background-color: rgb(72,209,204);">
      <div style="background-color: rgb(72,209,204);width: 33%;height: 100%;float: left"></div>
      <div style="background-color: rgb(72,209,204);width: 34%;height: 100%;float: left"> <p style="color: #91959c;font-size: 23px;line-height: 23px;font-weight: bold;height: 40px">联系界面</p></div>
      <div style="background-color: rgb(72,209,204);width: 33%;height: 100%;float: left" >  <el-button type="danger" plain  @click="jump('Index')">返回主页</el-button></div>
    </el-header>
    <el-container style="height: 70%; width: 60%;margin-left: 30%">


  <!--<div>-->
      <!--&lt;!&ndash;<div class="talk_input">&ndash;&gt;-->
        <!--&lt;!&ndash;&lt;!&ndash; 选项: 带有selected的选项,的value值和select标签共享 &ndash;&gt;&ndash;&gt;-->
       <!--&lt;!&ndash;&ndash;&gt;-->
        <!--&lt;!&ndash;&lt;!&ndash; 请输入内容 &ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="text" class="talk_word"  v-model='str2'>&ndash;&gt;-->
        <!--&lt;!&ndash;&lt;!&ndash; 按钮 &ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="button" value="发送" class="talk_sub"  @click="add_data()">&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
      <div class="talk_con2">
        <!-- 显示区域 -->
        <div class="talk_show" id="words">
          <!-- 根据vue对象中的数组，遍历出对应的标签。 -->
          <div v-for="i in arr" :class="i.person=='A'?'atalk':'btalk'" >

            <span >{{ i.words }}</span>
          </div>
        </div>

        <!-- 发送内容区域 -->
        <div class="talk_input">
          <!--<select class="whotalk" id="who" v-model='str1'>-->
            <!--<option value="0">A说：</option>-->
            <!--<option value="1">B说：</option>-->
          <!--</select>-->
          <!-- 请输入内容 -->
          <input type="text" class="talk_word" id="talkwords" v-model='str2'>
          <!-- 按钮 -->
          <input type="button" value="发送" class="talk_sub" id="talksub" @click="add_data()">
        </div>
      </div>





    </el-container>
  </el-container>
</template>
<style >
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-header, .el-footer {
    color: #7c235b;
    text-align: center;
    line-height: 60px;
  }
  .talk_con1{
    width:600px;
    height:500px;
    border:1px solid #666;
    margin: 30px;
    float: left;
    background:#e98080;
  }

  .talk_con2{
    width:600px;
    height:500px;
    border:1px solid #666;
    margin: 30px;
    float: right;
    background:#7adbd3;
  }
  .talk_show{
    width:580px;
    height:420px;
    border:1px solid #666;
    background:#fff;
    margin:10px auto 0;
    overflow:auto;
  }
  .talk_input{
    width:580px;
    margin:10px auto 0;
  }
  .whotalk{
    width:80px;
    height:30px;
    float:left;
    outline:none;
  }
  .talk_word{
    width:420px;
    height:26px;
    padding:0px;
    float:left;
    margin-left:10px;
    outline:none;
    text-indent:10px;
  }
  .talk_sub{
    width:56px;
    height:30px;
    float:left;
    margin-left:10px;
  }
  .atalk{
    margin:15px;

  }
  .atalk span{
    display:inline-block;
    background:#0181cc;
    border-radius:10px;
    color:#fff;
    padding:10px 20px;
  }
  .btalk{
    margin:15px;
    text-align:right;
  }
  .btalk span{
    display:inline-block;
    background:#ef8201;
    border-radius:10px;
    color:#fff;
    padding:10px 20px;
  }
  .el-aside {
    background-color: #c0c3bf;
    color: #333;
    line-height: 200px;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
  }

  .el-main {
    background-color: #e0e4eb;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  . hh{
    height: 56px;
    line-height: 56px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-menu-item, .el-submenu__title {
    height: 56px;
    line-height: 56px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    padding-left: 100px;
    /*list-style-position: initial;*/
    list-style-type: initial ;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
<script>




  export default {
    data() {
      return {
        arr:[
          {person: '',
           words: ''
          },

        ],
        massage:'',
        str1: '0',
        str2: '',
        fid:'',
        tid:'',
        fname:'',
        name:''
      };
    },
    mounted: function(){

      this.fid = this.$route.query.fid
      this.tid = this.$route.query.tid
      this.fname = this.$route.query.name
       var user= JSON.parse(window.sessionStorage.getItem("user"));
      console.log(user)
       this.name=user.userName

      axios.post('/user/personMassage', {
       fid:this.fid,
       tid:this.tid
      }).then((response) => {

        //全文搜索 项目
        // console.log("2")
        console.log(response.data)
        if (response.data != "") {
          var e=response.data
          var data=[];
          for(var c=e.length-1;c>=0;c--){
            var ee=e[c];



            var obj={}
            obj.words=ee.massage
            console.log(ee.massage)
            var ff=ee.fromName
            console.log(ee.fromName)
            if(this.name==ff){
              console.log("sadsdadsa")
              obj.person="B"
            }else{
              console.log("bbbbbbb")
              obj.person="A"
            }
            var rr=e.length-c-1
            data[rr]=obj


          }
          console.log(data)
          this.arr=data
          console.log(this.arr)


        }
        else {
          // this.$notify.error({
          //   title: '没有数据',
          //   message: response.data.message,
          //   type: 'warning',
          //   duration: 0
          // });
        }

      }).catch((response) => {

      })





    },
    methods: {

      add_data: function(){
        // bug: 内容不能为空。
        if(this.str2 == ''){
          alert('请输入内容...')
          return;
        }
        var p = this.str1=="0"?"B":"A";
        var obj = {person: p, words: this.str2}
        this.arr.push(obj)

        var message = {
          "message":this.str2,
          "username":this.name,
           "userid":this.tid,
          "to":this.fid
        };
        this.massage=message
        this.send();
        // 添加完内容，清空
        this.str2 = ''






      },

      jump(path){
        this.$router.replace({path:path})
      },
      jumpp(path){
        this.$router.push({
          path: path,
          query: {
            mallCode: this.wid,
          }
        })},




      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

    }}
</script>
